<template>
	<div>
		<cl-crud @load="onLoad">
			<template #slot-filter>
				<div class="nav base-flex" style="margin-right:10px">
					<div class="nav-li">
						<filterClass
								@change="
								val =>
									crud.refresh({
										cid: val
									})
							"
						></filterClass>
					</div>
					<div class="nav-li">
						<filterGstatus
								@change="
								val =>
									crud.refresh({
										status: val
									})
							"
						></filterGstatus>
					</div>
				</div>
			</template>
			<template #table-column-goodInfo="{scope}">
				<good-info :item="scope.row"></good-info>
			</template>
			<template #table-column-couponInfo="{scope}">
				<coupon-info :item="scope.row"></coupon-info>
			</template>
			<template #table-column-isDHh="{scope}">
				<div>
					<el-tag v-if="scope.row.isDHh == 1" type="success">是</el-tag>
					<el-tag type="info" v-else>否</el-tag>
				</div>
			</template>
			<template #table-column-isNine="{scope}">
				<div>
					<el-tag v-if="scope.row.isNine == 1" type="success">是</el-tag>
					<el-tag type="info" v-else>否</el-tag>
				</div>
			</template>

			<template #table-column-platform="{scope}">
				{{ scope.row.source | dict_platform }}
			</template>

			<template #table-column-endTime="{scope}">
				<div>
					<div>免单开始时间：{{ scope.row.endTime | dateFormatLine }}</div>
					<div>免单结束时间：{{ scope.row.startTime | dateFormatLine }}</div>
				</div>
			</template>
			<template #slot-setSort="{scope}">
				<span class="setsort" @click="setGoodsort(scope.row)">
					修改
				</span>
			</template>
			<template #table-column-status="{scope}">
				<div>
					<el-tag v-if="scope.row.status == 1" type="success">正常</el-tag>
					<el-tag type="info" v-if="scope.row.status == 2">已下架</el-tag>
				</div>
			</template>
			<template #slot-row-copy="{scope}">
				<div class="copy">
					<el-tooltip :content="scope.row.title" placement="top">
						<el-button
								type="text"
								size="small"
								@click="copyTkl(scope.row)"
						>复制淘口令</el-button
						>
					</el-tooltip>
				</div>
			</template>
		</cl-crud>

		<cl-form ref="cl-form"></cl-form>
	</div>
</template>

<script>
	import goodInfo from './components/list/good-info';
	import couponInfo from './components/list/coupon-info';
	import filterClass from './components/filterClass';
	import filterGstatus from './components/filterGstatus';
	import Clipboard from 'clipboard';
	export default {
		data() {
			return {
				crud: null
			};
		},
		components: {
			goodInfo,
			couponInfo,
			filterClass,
			filterGstatus
		},

		methods: {
			setGoodsort(item) {
				const self = this;
				this.$refs['cl-form'].open({
					props: {
						'label-width': '80px',
						width: '470px',
						center: true,
						'custom-class': 'custom-class-dialog-mini'
					},
					items: [
						{
							prop: 'pic',
							label: '商品主图：',
							span: 24,
							value: item.pic,
							component: {
								name: 'cl-upload'
							}
						},
						{
							prop: 'title',
							label: '商品标题',
							span: 24,
							value: item.title,
							component: {
								name: 'el-input',
								attrs: {
									size: 'mini'
								}
							}
						},
						{
							prop: 'ysqLevel',
							label: '排序值',
							span: 24,
							value: item.ysqLevel ? item.ysqLevel : 100,
							component: {
								name: 'ysqlevel-input',
								data() {
									return {
										value2: 0
									};
								},
								props: {
									value: [String, Number]
								},
								mounted() {
									this.value2 = this.value;
								},
								methods: {
									input(e) {
										this.$emit('input', e);
									}
								},
								render() {
									return (
											<div style="display:flex">
											<el-input-number
									controls-position="right"
									min={1}
									max={100000}
									onInput={this.input}
									v-model={this.value2}></el-input-number>
											<span style="color:red;margin-left:10px">
											* 序号越大，排序越靠前
									</span>
									</div>
								);
								}
							},
							rules: [{ required: true, message: '免单总数不能为空', trigger: 'blur' }]
						},
						{
							prop: 'status',
							label: '是否上架',
							span: 12,
							value: item.status,
							component: {
								name: 'el-input-number1',
								attrs: {
									'controls-position': 'right',
									min: 1,
									max: 10000
								},
								data() {
									return {
										value2: 1
									};
								},
								props: {
									value: [String, Number]
								},
								methods: {
									change(e) {
										console.log(e);
										this.$emit('input', e);
									}
								},
								mounted() {
									this.value2 = this.value;
								},
								render() {
									return (
											<el-radio-group onChange={this.change} v-model={this.value2}>
											<el-radio label={1}>上架</el-radio>
											<el-radio label={2}>下架</el-radio>
											</el-radio-group>
								);
								}
							},
							rules: [{ required: true, message: '免单总数不能为空', trigger: 'blur' }]
						}
					],
					on: {
						submit({ data, close }) {
							self.$service.goodsMenagement.mdGoods
									.updateInfo({
										...data,
										gid: item.gid,
										id: item.id
									})
									.then(() => {
										self.$message({
											message: '设置成功',
											type: 'success'
										});
										self.crud.refresh();
										close();
										return;
									})
									.catch(err => {
										self.$message.error(err);
									});
						}
					}
				});
			},
			onLoad({ ctx, app }) {
				this.crud = app;

				ctx.service(this.$service.goodsMenagement.mdGoods)
						.set('dict', {
							api: {
								update: 'updateGoods',
								info: 'detail'
							}
						})
						.set('table', {
							columns: [
								{
									label: '序号',
									type: 'index',
									align: 'center',
									width: 80
								},
								{
									label: '商品信息',
									prop: 'goodInfo',
									align: 'left',
									'min-width': 400
								},
								{
									label: '优惠券信息',
									prop: 'couponInfo',
									align: 'left',
									'min-width': 300
								},
								{
									label: '商品排序',
									prop: 'ysqLevel',
									align: 'center',
									sortable: 'custom',
									emptyText: '0',
									'min-width': 100
								},
								{
									label: '月销量',
									prop: 'sale',
									align: 'center'
								},
								{
									label: '免单时间',
									prop: 'endTime',
									align: 'center',
									'min-width': '250px'
								},
								{
									label: '佣金比例',
									prop: 'commissionRate',
									align: 'center'
								},
								{
									label: '9.9包邮',
									prop: 'isNine',
									align: 'center'
								},
								{
									label: '抖好货',
									prop: 'isDHh',
									align: 'center'
								},
								{
									label: '是否下架',
									prop: 'status',
									align: 'center',
									'min-width': 100
								},
								{
									label: '平台',
									prop: 'platform',
									align: 'center'
								}
							],

							op: {
								layout: ['slot-row-copy']
							}
						})
						.set('upsert', {
							props: {
								labelWidth: '150px'
							},
							items: [
								{
									prop: 'ysqLevel',
									label: '商品排序：',
									value: 100,
									component: {
										name: 'ysqlevels',
										data() {
											return {
												ysqLevel: 100
											};
										},
										props: {
											value: [String, Number]
										},
										mounted() {
											this.ysqLevel = this.value;
										},
										methods: {
											input(e) {
												this.$emit('input', e);
											}
										},
										render() {
											return (
													<div style="display:flex">
													<el-input-number
											v-model={this.ysqLevel}
											controls-position="right"
											onInput={this.input}
											min={1}
											max={10000}></el-input-number>
													<span style="color:#999999;margin-left:10px">
													序号越大，排序越靠前
											</span>
											</div>
										);
										}
									}
								},
								{
									prop: 'status',
									label: '商品状态：',
									value: 1,
									component: {
										name: 'g_radio',
										data() {
											return {
												value2: 1
											};
										},
										props: {
											value: [String, Number]
										},
										mounted() {
											this.value2 = Number(this.value || 1);
										},
										methods: {
											change(e) {
												this.$emit('input', e);
											}
										},
										render() {
											return (
													<el-radio-group
											onChange={this.change}
											v-model={this.value2}>
													<el-radio label={1}>上架</el-radio>
													<el-radio label={0}>下架</el-radio>
													</el-radio-group>
										);
										}
									}
								}
							]
						})
						.on('refresh', async (params, { next }) => {
							let { list } = await next(params);
							list.map(item => {
								item.commissionRate = (item.commissionRate || 0) + '%';
								item.sale = item.sale + '件';
							});
						})
						// .on('submit', (data, { next }) => {
						// 	console.log(data);
						// })
						.on('delete', (selection, { next }) => {
							next({
								batchId: selection.map(e => e.recordBatch).join(','),
								gid: selection.map(e => e.gid).join(',')
							});
						})
						.set('layout', [
							['refresh-btn', 'query', 'flex1', 'slot-filter', 'search-key'],
							['data-table'],
							['flex1', 'pagination']
						])
						.done();

				app.refresh({
					status: 1,
					newPerson: 1,
					prop: 'createTime',
					order: 'desc',
					type: 6
				});
			},
			copyTkl(item) {
				this.$service.goodsMenagement.record
						.privilege({
							itemId: item.gid,
							title: item.title
						})
						.then((res) => {
							this.$copyText(res.tkl).then(() => {
										this.$message.success('复制成功');
									}, () => {
										this.$message.success('复制失败');
									}
							);
						})
						.catch(err => {

						});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.setsort {
		color: $color-link;
		cursor: pointer;
		margin: 5px 5px 5px 15px;
		:hover {
			opacity: 0.8;
		}
	}
	.nav {
		font-size: $font12;
		.nav-li {
			margin-left: 10px;
		}
	}
</style>
